import React, {PureComponent} from 'react'
import {connect} from 'react-redux'
import Line from '../chart/base-line'
import {setTitle, scale} from '../chart/util/common'

class OrderPunctuality extends PureComponent {
    shouldComponentUpdate(nextProps) {
        return nextProps.orderPunctuality !== this.props.orderPunctuality
    }

    renderDate = (data) => {
        const orderPunctuality = data.toJS()
        orderPunctuality.sort((a, b) => a.dt - b.dt)
        orderPunctuality.sort((a, b) => a.dt - b.dt)
        return {
            title: '合同承诺发货正点率',
            xAxisData: orderPunctuality.map(o => {
                return o.dt
            }),
            option: {
                yAxis: {
                    min: 90,
                    max: 100,
                    axisLabel: {
                        formatter: '{value}%'
                    }
                },
                title: {
                    textStyle: {
                        color: '#5BE2EF',
                        fontSize: 14 * scale,
                        fontWeight: 'bolder'
                    }
                },
            },
            yAxisData: [{
                data: orderPunctuality.map(o => {
                    return o.percent
                })
            }]
        }
    }


    render() {
        const {orderPunctuality} = this.props
        const data = this.renderDate(orderPunctuality)
        return (
            <Line config={data}/>
        )
    }

}

function mapStoreToProps({orderPunctuality}) {
    return {orderPunctuality}
}

export default connect(mapStoreToProps)(OrderPunctuality)